<script setup lang="ts">
import {
  getLast30DaysSaleData,
  getCategoryData,
  getMemberTop10Data
} from '@/api/Home/index';
import pageWrap from '@/components/pageWrap/index.vue';
import { useLayoutConfigStore } from '@/stores/layoutConfig';
import { Avatar, Row, Col } from 'ant-design-vue';
import { computed, defineAsyncComponent, onMounted, reactive } from 'vue';

const LineChart = defineAsyncComponent(() =>
  import('@/components/echarts/lineChart.vue')
);
const PieChart = defineAsyncComponent(() =>
  import('@/components/echarts/pieChart.vue')
);
const BarChart = defineAsyncComponent(() =>
  import('@/components/echarts/barChart.vue')
);
const GaugeChart = defineAsyncComponent(() =>
  import('@/components/echarts/gaugeChart.vue')
);

const layoutConfig = useLayoutConfigStore();
// 图表主题：'dark'暗黑
const theme = computed(() => (layoutConfig.isDark ? 'dark' : 'light'));
// 图表背景色
const bgColor = computed(() => (layoutConfig.isDark ? 'transparent' : ''));

const state: any = reactive({
  category: {
    loading: false,
    data: []
  },
  last30Days: {
    loading: false,
    xAxisData: [] as string[],
    data: [] as any[]
  },
  memberTop10: {
    loading: true,
    xAxisData: [] as string[],
    data: [] as number[]
  }
});
onMounted(() => {
  loadCategoryData();
  loadLast30DaysSaleData();
  loadMemberTop10Data();
});
// 查询近30天销售趋势数据
const loadLast30DaysSaleData = async () => {
  try {
    const { data } = await getLast30DaysSaleData();
    state.last30Days.loading = true;
    const {
      last30Days,
      orderNumList,
      rechargeMoneyList,
      returnMoneyList,
      saleMoneyList
    } = data;
    // x轴数据
    state.last30Days.xAxisData = last30Days;
    // 每种类型的近30天的 y 轴数据
    state.last30Days.data = [
      { typeName: '总工时', list: orderNumList },
      { typeName: '计划值', list: rechargeMoneyList },
      { typeName: '挣值', list: returnMoneyList },
      { typeName: '成本', list: saleMoneyList }
    ];
  } catch (error) {
  } finally {
    // state.last30Days.loading = false;
  }
};
// 项目工时趋势
const loadCategoryData = async () => {
  try {
    const { data } = await getCategoryData();
    state.category.loading = true;
    state.category.data = data;
  } catch (error) {
  } finally {
    // state.last30Days.loading = false;
  }
};
const loadMemberTop10Data = async () => {
  try {
    const { data } = await getMemberTop10Data();
    state.memberTop10.loading = true;
    state.memberTop10.xAxisData.length = 0;
    state.memberTop10.data.length = 0;
    data.forEach((item: any) => {
      state.memberTop10.xAxisData.push(item.name);
      state.memberTop10.data.push(item.consumeMoney);
    });
  } catch (error) {
  } finally {
    // state.last30Days.loading = false;
  }
};
</script>
<template>
  <pageWrap headerContent>
    <template v-slot:header>
      <div class="text-2xl">工作台</div>
      <div class="flex justify-between items-center  mt-8">
        <div class="flex items-center">
          <Avatar
            class="mr-3 block"
            :size="50"
            src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
          />
          <div class="flex items-center">
            <iframe
              style="height:25px;width: auto;"
              scrolling="no"
              src="https://tianqiapi.com/api.php?style=tx&skin=pitaya&color=#000&fontsize=20"
              frameborder="0"
              allowtransparency="true"
            />
          </div>
        </div>
        <div class="flex items-center mr-5">
          <div class="flex flex-col items-center mr-3">
            <div class="mb-1 text-gray-400">项目</div>
            <div class="text-xl">56</div>
          </div>
          <div class="flex flex-col items-center">
            <div class="mb-1 text-gray-400">本月工时</div>
            <div class="text-xl">18</div>
          </div>
        </div>
      </div>
    </template>
    <div class="overflow-y-auto pb-20">
      <Row :gutter="[15, 15]">
        <Col :xs="24" :sm="24" :lg="11" :xl="9" class="mb-5">
          <PieChart
            title="项目工时趋势"
            subtitle="人员的近30天工时记录"
            :data="state.category.data"
            :theme="theme"
            :bgColor="bgColor"
          />
        </Col>
        <Col
          v-if="state.last30Days.loading"
          :xs="24"
          :sm="24"
          :lg="13"
          :xl="15"
          class="mb-5"
        >
          <LineChart
            title="近30天工时记录"
            :xAxisData="state.last30Days.xAxisData"
            :data="state.last30Days.data"
            :theme="theme"
            :bgColor="bgColor"
          />
        </Col>
      </Row>
      <Row :gutter="[15, 15]">
        <Col :xs="24" :sm="24" :lg="13" :xl="15" class="mb-5">
          <BarChart
            title="工时人员top10"
            :theme="theme"
            :bgColor="bgColor"
            :data="state.memberTop10.data"
            :xAxisData="state.memberTop10.xAxisData"
          />
        </Col>
        <Col :xs="24" :sm="24" :lg="11" :xl="9" class="mb-5">
          <GaugeChart
            title="领导怒气值"
            :theme="theme"
            :bgColor="bgColor"
            :data="43"
          />
        </Col>
      </Row>
    </div>
  </pageWrap>
</template>
<style scoped lang="less"></style>
